<html>
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/base.css" %}" type="text/css" media="screen" />
<style type="text/css">

.stylize{
display:block;
margin-top:10em;
margin-bottom:15em;
}

.buttons{
height:25px;
width:125px;
background-color:#99BCEB;
}

.alignment{
position:absolute;
margin-top:-5em;
margin-left:20em;
}

div.ex
{
width:220px;
padding:10px;
margin:10px;
}

#tarea{
position:absolute;
margin-left:10em;
margin-bottom:20em;
}

</style>
<script language="javascript">
	function logout()
	{
		window.location="/logout/";

	}

	function viewblog(){
	window.location = "/blogit/viewblog/";
	}

	function createNewBlog(){
		var x = document.getElementById("tarea")		
		var ta = document.createElement("textarea");
		var title = document.createElement("textarea");
		var p = document.createElement("p");
		var button = document.createElement("button");
		

		ta.name = "content";
		ta.rows = "18";
		ta.cols = "100";
		button.name = "Submit";	

			
		x.appendChild(ta);
		x.appendChild(p);
		x.appendChild(button);
	}
		
</script>
<!-- Script to load the text editor -->


<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="/home/rachana/myblog/theblog/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
        plugins : "fullpage",
        theme_advanced_buttons3_add : "fullpage"
		});
</script> <!-- script to load the editor ends here. -->
</head>

<body>
	<table width="1300" align="center">
	<tr>
		<td colspan="3">
		Welcome, {{username}}<img src="{% static "images/settings.gif"%}">
		<button type="button" onclick="logout()" align="right">Logout</button>	
		<hr></hr>	
		</td>
	</tr>
	<tr>		
		<td style="width:400px; height:500px;">
			<div>
			Write a new blog<a href="/newblog/"><img src="{% static "images/add_new.png"%}"><a>
			</div>
			<ul>
				<div style="text-align:top;">
				{% for a in content %}
					<li style="list-style-type:none;"><a href="/viewblog/content/?blogname={{a}}">{{a}}</a>
					<a href="/editblog/?blogname={{a}}"><img src="{% static "images/Edit_icon.png"%}"></a>
					<a href="/deleteblog/?blogname={{a}}"><img src="{% static "images/trash.gif"%}"></a></li><br>
				{%	endfor	%}
				</div>
			</ul>
		</td>
		<td style="width:1200px; text-align:center;">
			<form action="/theblog/update/?blogname={{blogname}}" method="POST">{% csrf_token %}
				<div>
					<p>
						<input type="text" name="title" size="50" value="{{blogname}}"/>
						<textarea rows="18" cols="100" name="content">{{data.1}}</textarea><br>
						<input type="submit" value="Save"><button type="button" onclick="viewblog()">Cancel</button> 
					</p>
				</div>
			</form>
		</td>
		
		<td style="width:300px;margin-right:10em; text-align:top;">Archives</td>		
	</tr>
	<tr>
		<td colspan="3" style="background-color:blue; text-align:center;">Powered by Django</td>
	</tr>
	</table>
	<div id="tarea" class="stylize"></div>

</body>
</html>
